<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rect</title>
    <style type="text/css">
        .l{float:left;}
        .img{margin-top:30px; position:absolute;}
    </style>
</head>
<body>
<div class="l">
    <img id="cropTestImg" src="/static/img/test.jpg" height="600px"/>
</div>
<img id="rectTestImg" class="img" src="/static/img/test.jpg" height="600px" />

</body>

<script type="text/javascript" src="/static/js/zxx.crop_rotation.js"></script>
<script>
    var $ = function(id) {
        return document.getElementById(id);
    };
    var oCropImg = $("cropTestImg"), oRectImg = $("rectTestImg");
    fnImageCropRot(oCropImg);

    setInterval(function() {
        var cropPosX = parseInt($("cropPosX").value) || 0,
            cropPosY = parseInt($("cropPosY").value) || 0,
            cropImageWidth = parseInt($("cropImageWidth").value) || 0,
            cropImageHeight = parseInt($("cropImageHeight").value) || 0;

        oRectImg.style.clip = "rect("+ cropPosY + "px "+ (cropImageWidth + cropPosX) +"px "+ (cropImageHeight + cropPosY) +"px "+ cropPosX +"px)";
    }, 100);
</script>
</html>